<template>
    <div>
        <child-header>
            <template #title>
                <div>
                    翻译
                </div>
            </template>
        </child-header>
        <div class="main" v-if="type == 1">
            <div class="title">上传图片</div>
            <div class="translate-img">
                <van-uploader v-model="fileList" multiple :max-count="1" />
            </div>
            <div class="title">翻译内容</div>
            <div class="translate-text">
                <van-text-ellipsis rows="3" :content="text" expand-text="展开" collapse-text="收起" />
            </div>
        </div>
        <div class="main" v-if="type == 2 || type == 3">
            <div class="translate-box">
                <div class="left">
                    <van-cell-group inset>
                        <van-field v-model="beforeTranslate" rows="5" autosize type="textarea" placeholder="请输入内容" />
                    </van-cell-group>
                </div>
                <van-icon name="exchange" />
                <div class="right">
                    <van-cell-group inset>
                        <van-field v-model="afterTranslate" rows="5" autosize type="textarea" placeholder="请输入内容" />
                    </van-cell-group>
                </div>
            </div>
            <van-collapse v-model="activeName" accordion>
                <van-collapse-item title="餐厅" name="1">
                    推荐餐厅
                </van-collapse-item>
                <van-collapse-item title="车站" name="2">
                    推荐车站
                </van-collapse-item>
                <van-collapse-item title="大酒店" name="3">
                    推荐大酒店
                </van-collapse-item>
            </van-collapse>
        </div>
        <div class="main" v-if="type == 4">
            <div class="microphone">
                <van-icon name="play-circle-o" size="40"/>
                <van-icon name="pause-circle-o" size="40"/>
                <van-icon name="stop-circle-o" size="40"/>
            </div>
            <van-button loading type="primary" block loading-text="翻译中..." />
            <div class="title">翻译内容</div>
            <div class="translate-text">
                <van-text-ellipsis rows="3" :content="text" expand-text="展开" collapse-text="收起" />
            </div>
        </div>
    </div>
</template>

<script setup>
import Header from "../components/Header.vue";
import ChildHeader from "../components/ChildHeader.vue";
import { ref } from "vue";

const props = defineProps(['type']);
const beforeTranslate = ref("");
const afterTranslate = ref("");
const activeName = ref("1");
const fileList = ref([]);
const text = ref("Day 1: Departure and Arrival Depart from Dalian and fly to Vladivostok, Russia.Upon arrival, check into the hotel and rest.Day 2: Urban Tourism Visit iconic attractions in Vladivostok, such as Golden Horn and Russian Island.Experience the exotic charm of Russia.Day 3: Cultural Experience Visit local museums to learn about the history and culture of Russia.And taste local cuisine, such as Russian caviar, red vegetable soup, etc. The fourth day: Leisure shopping Go shopping in the shopping area of the city center and choose Russian souvenirs.You can enjoy the local night view at night.Day 5: Return trip According to the return flight schedule, check out in advance and head to the airport to end a pleasant trip to Russia");
const afterRead = (file) => {
    fileList.value.push(file);
};
</script>

<style scoped>
.main {
    height: 100%;
    padding: 10px;
    margin: 50px 0;
    background-color: #fff;
}

:deep(.van-uploader__upload) {
    width: 100px;
    height: 100px;
}

:deep(.van-cell) {
    background: transparent;
}

:deep(.van-cell-group) {
    background: transparent;
}

.main .title {
    padding: 15px 10px;
    margin-bottom: 10px;
    color: #fff;
    text-align: center;
    font-weight: 600;
}

.main .title:nth-of-type(1) {
    border-radius: 0 20px 0 100%;
    background: linear-gradient(to right, #0080ff, #00d5ff);
}

.main .title:nth-of-type(3) {
    border-radius: 0 100% 0 20px;
    background: linear-gradient(to right, #00ffa6, #00ff11);
}

.translate-img {
    text-align: center;
}

.translate-text {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.translate-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.translate-box .left {
    width: 150px;
    height: 150px;
    background: linear-gradient(to right, #0080ff, #00d5ff);
    border-radius: 20%;
    margin-right: 10px;
}

.translate-box .right {
    width: 150px;
    height: 150px;
    background: linear-gradient(to right, #00ffa6, #00ff11);
    border-radius: 20%;
    margin-left: 10px;
}
.microphone {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 50px;
    margin-bottom: 20px;
}
</style>